<template>
    <view :style="{ paddingTop: top + 'px' }" class="min-h-screen bg bg-[#F8F8F8]">
        <view :style="{ height: pendantHight + 'px' }"
            class="text-[#3D3D3D] font-medium  flex items-center justify-center text-[40rpx] relative">
            账户密码登录
            <view @click="goback" class="absolute left-[36rpx]"><up-icon name="arrow-left" color="#000"
                    size="23"></up-icon></view>

        </view>
        <view class="mx-[40rpx] mt-[300rpx]">
            <input v-model="username" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx]" type="text" placeholder="请输入账号">
            <input v-model="password" class="bg-[#EFEFEF] h-[88rpx] rounded px-[45rpx]  mt-[45rpx]" type="password"
                placeholder="请输入密码">
        </view>
        <view class="text-[25rpx] mt-[96rpx] text-[#3D3D3D] flex ml-[35rpx] items-center">
            <u-checkbox-group v-model="agreement">
                <u-checkbox shape="circle" label="" name="1">
                </u-checkbox>
            </u-checkbox-group>
            <text>我已阅读并同意</text><text class="text-[#FD755D]">《用户隐私协议》</text>
            <text class="text-[#FD755D]">《用户服务协议》</text>
        </view>
        <view class="mt-[175rpx] flex justify-center">
            <view @click="login"
                class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                登录</view>
        </view>
    </view>

</template>

<script setup>
import api from "@/api/api"
import { useUserStore } from '@/stores/userinfo'
import { ref } from "vue"
const res = wx.getMenuButtonBoundingClientRect()
const top = ref(res.top) //胶囊距上距离
const pendantHight = ref(res.bottom - res.top) //胶囊高度  
const roleSelect = ref(false)
const username = ref('')
const password = ref('')
const agreement = ref(false)
const goback = () => {
    uni.navigateBack()
}
const navigateTo = (url) => {
    uni.navigateTo({
        url
    })
}
const login = async() => {
    if (!agreement.value) return uni.showToast({
        title: '请先同意协议',
        icon: 'none'
    })
    if (username.value == '' || password.value == '') return uni.showToast({
        title: '请输入账号密码',
        icon: 'none'
    })
    uni.showLoading({
        title: '加载中',
        mask: true
    })
    const res = await api.accountLogin({
        account: username.value,
        password: password.value
    })
    
    if (res.code == 200) {
        uni.setStorageSync('token', res.data.authorization)
        uni.setStorageSync('userInfo',JSON.stringify( res.data.userinfo))
        uni.showToast({
            title: '登录成功',
            icon: 'none'
        })
        const timer = setTimeout(() => {
            uni.switchTab({
                url: '/pages/my/my'
            })
            clearTimeout(timer)
        }, 1500)

    }else {
       uni.showToast({
        title: res.msg,
        icon: 'error'
    })
    }

}
</script>

<style lang="scss" scoped>
.bg {
    background: linear-gradient(168deg, rgba(255, 146, 127, 0.4) 0%, #FFFFFF 40%, rgba(255, 255, 255, 0) 100%);
}
</style>